import React from 'react';
import { useDispatch, useSelector } from 'react-redux'
import List from './components/list'
import Right from './components/right'
const App = () => {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch()
  const add = (num) => {
    dispatch({ type: 'add', payload: num })
  }

  return (
    <div style={{ display: 'flex' }}>
      <div style={{ width: '50vw', borderRight: '1px solid #ccc' }}>
        <h1>React-Redux</h1>
        <h3>{count}</h3>
        <button onClick={() => add(1)}>+1</button>
        <button onClick={() => add(10)}>+10</button>
        <button onClick={() => add(100)}>+100</button>
        <List></List>
      </div>
      <div>
        <Right></Right>
      </div>
    </div>
  )
}

export default App